{\rtf1\ansi\ansicpg936\cocoartf1504\cocoasubrtf600
{\fonttbl\f0\fnil\fcharset134 PingFangSC-Regular;\f1\fnil\fcharset0 HelveticaNeue;\f2\fmodern\fcharset0 Courier;
\f3\fnil\fcharset0 Menlo-Regular;\f4\fnil\fcharset0 Menlo-Bold;}
{\colortbl;\red255\green255\blue255;\red52\green52\blue52;\red255\green255\blue255;\red82\green88\blue102;
\red246\green246\blue246;\red0\green0\blue0;\red255\green128\blue0;\red255\green255\blue255;\red46\green111\blue253;
\red47\green180\blue29;\red111\green111\blue111;\red82\green0\blue103;\red15\green112\blue3;\red0\green0\blue109;
}
{\*\expandedcolortbl;\csgray\c100000;\cssrgb\c26667\c26667\c26667;\cssrgb\c100000\c100000\c100000;\cssrgb\c39608\c41961\c47451;
\cssrgb\c97255\c97255\c97255;\csgray\c0;\csgenericrgb\c100000\c50000\c0;\csgray\c100000;\csgenericrgb\c18039\c43529\c99216;
\cssrgb\c20238\c73898\c14947;\cssrgb\c51166\c51167\c51165;\csgenericrgb\c32157\c0\c40392;\csgenericrgb\c5882\c43922\c1176;\csgenericrgb\c0\c0\c42745;
}
\paperw11900\paperh16840\margl1440\margr1440\vieww18760\viewh17740\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 Install Environment \
\
1.  I use MacOS, so install npm, nodejs and homebrew.\
\
2.  Follow the official document and I give some notes below:\
official website: {\field{\*\fldinst{HYPERLINK "http://mint-ui.github.io/docs/#/zh-cn2/quickstart"}}{\fldrslt http://mint-ui.github.io/docs/#/zh-cn2/quickstart}}\
\
\pard\pardeftab720\sl320\sa345\partightenfactor0

\fs28\fsmilli14400 \cf2 \cb3 \expnd0\expndtw0\kerning0
\'ca\'b9\'d3\'c3
\f1  vue-cli\
\pard\pardeftab720\sl320\partightenfactor0

\f2\fs28 \cf4 \cb5 npm install -g vue-cli\
\
vue init webpack projectname\
\
npm install\
\
\pard\pardeftab720\sl320\sa345\partightenfactor0

\f1\fs28\fsmilli14400 \cf2 \cb3 Then it will give some forms to fullfil, such as project name, this name does not allow Uppercase letters.\
Next, I use command: 
\f3\fs22 \cf6 \cb7 \kerning1\expnd0\expndtw0 \CocoaLigature0 npm install mint-ui -S //FOr I wanna use Mint-UI.\cb8 \
Then, Back to the `quick start`. Install the babel.\
\pard\pardeftab720\sl320\partightenfactor0

\f2\fs28 \cf4 \cb5 \expnd0\expndtw0\kerning0
\CocoaLigature1 npm install babel-plugin-component -D\
\
npm run dev\
\pard\pardeftab720\sl320\sa345\partightenfactor0

\f3\fs22 \cf6 \cb8 \kerning1\expnd0\expndtw0 \CocoaLigature0 \
Then, the Terminal looks like:\
\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\partightenfactor0
\cf6 \cb9 AB0000:abDJAC Tomk$ npm run dev\
\
> djac@1.0.0 dev /Users/Tomk/Desktop/TestWeb/abDJAC\
> node build/dev-server.js\
\
> Starting dev server...\
\
\
\cf0  DONE \cf6  \cf10 Compiled successfully in 34992ms\cf6                                  \cf11 09:40:08\cf6 \
\
> Listening at http://localhost:8080\
\
\
\pard\pardeftab720\sl320\sa345\partightenfactor0
\cf6 \cb8 \
Then, open the Chrome browser or else. Typo: {\field{\*\fldinst{HYPERLINK "http://localhost:8080/#/"}}{\fldrslt http://localhost:8080/#/}}\
It\'92s done!\
PS: 
\f0 \'d4\'da\'d0\'de\'b8\'c4.babelrc\'ca\'b1\'a3\'ac\'bc\'d3\'c8\'ebES2015\'bb\'e1\'b1\'a8\'b4\'ed\'a3\'ac\'b9\'ca\'b6\'f8\'c9\'be\'b5\'f4\'c1\'cb\'a1\'a3\'d7\'ee\'d6\'d5\'c0\'e0\'cb\'c6\'a3\'ba\
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f3\fs24 \cf0 \cb1 \CocoaLigature1 \{\uc0\u8232   
\f4\b \cf12 "presets"
\f3\b0 \cf0 : [\uc0\u8232     [
\f4\b \cf13 "env"
\f3\b0 \cf0 , \{\uc0\u8232       
\f4\b \cf12 "modules"
\f3\b0 \cf0 : 
\f4\b \cf14 false
\f3\b0 \cf0 ,\uc0\u8232       
\f4\b \cf12 "targets"
\f3\b0 \cf0 : \{\uc0\u8232         
\f4\b \cf12 "browsers"
\f3\b0 \cf0 : [
\f4\b \cf13 "> 1%"
\f3\b0 \cf0 , 
\f4\b \cf13 "last 2 versions"
\f3\b0 \cf0 , 
\f4\b \cf13 "not ie <= 8"
\f3\b0 \cf0 ]\uc0\u8232       \}\u8232     \}],\u8232 \u8232     
\f4\b \cf13 "stage-2"\uc0\u8232   
\f3\b0 \cf0 ],\uc0\u8232   
\f4\b \cf12 "plugins"
\f3\b0 \cf0 : [\uc0\u8232     
\f4\b \cf13 "transform-runtime"
\f3\b0 \cf0 ,\uc0\u8232     [
\f4\b \cf13 "component"
\f3\b0 \cf0 , [\uc0\u8232       \{\u8232         
\f4\b \cf12 "libraryName"
\f3\b0 \cf0 : 
\f4\b \cf13 "mint-ui"
\f3\b0 \cf0 ,\uc0\u8232         
\f4\b \cf12 "style"
\f3\b0 \cf0 : 
\f4\b \cf14 true\uc0\u8232       
\f3\b0 \cf0 \}\uc0\u8232     ]]\u8232   ],\u8232   
\f4\b \cf12 "env"
\f3\b0 \cf0 : \{\uc0\u8232     
\f4\b \cf12 "test"
\f3\b0 \cf0 : \{\uc0\u8232       
\f4\b \cf12 "presets"
\f3\b0 \cf0 : [
\f4\b \cf13 "env"
\f3\b0 \cf0 , 
\f4\b \cf13 "stage-2"
\f3\b0 \cf0 ],\uc0\u8232       
\f4\b \cf12 "plugins"
\f3\b0 \cf0 : [
\f4\b \cf13 "istanbul"
\f3\b0 \cf0 ]\uc0\u8232     \}\u8232   \}\u8232 \}\u8232 \
\pard\pardeftab720\sl320\sa345\partightenfactor0

\fs22 \cf6 \cb8 \CocoaLigature0 \
\
\
\
\
\pard\pardeftab720\sl320\sa345\partightenfactor0

\f0\fs24 \cf0 \cb8 \CocoaLigature1 \
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0
\cf0 \
}